<template>
  <div class="container">
    <!-- 关闭按钮 -->
    <div class="btnClose">
      <span class="iconfont iconicon-test"></span>
    </div>
    <!-- logo -->
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <!-- 输入框封装 -->

    <Input
      type="text"
      tips="用户名 / 手机号"
      :rule="/^.{3,12}$/"
      errMsg="请输入正确的用户名"
      @setValue="setusername"
    />
    <Input
      tips="密码"
      type="password"
      :rule="/^\d{3,12}$/"
      errMsg="请输入正确密码"
      @setValue="setpassword"
    />
    <!-- 登录按钮 -->
    <LoginButton @LoginBtn="Login" BtnType="登陆" />
  </div>
</template>

<script>
import { login } from "@/api/login";
import LoginButton from "../components/LoginButton";
import Input from "../components/Input";
export default {
  components: {
    Input,
    LoginButton,
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },

  methods: {
    setusername(newValue) {
      this.username = newValue;
    },
    setpassword(newValue) {
      this.password = newValue;
    },
    Login() {
      login({
        username: this.username,
        password: this.password,
      }).then((res) => {
        console.log(res);
        if (res.data.message === "登录成功") {
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("user_id", res.data.data.user.id);
          this.$toast.success("登陆成功");
          setTimeout(() => {
            this.$router.push("/");
          }, 800);
        }
      });
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-color: #f2f2f2;
  padding: 24/360 * 100vw;
  .btnClose {
    .iconicon-test {
      font-size: 28/360 * 100vw;
    }
  }
  .logo {
    text-align: center;
    .iconnew {
      font-size: 80/360 * 100vw;
      color: #d81e06;
    }
  }
}
.error {
  border-color: red;
}
</style>